<!--

    Copyright (c) 2012, Mayocat <hello@mayocat.org>

    This Source Code Form is subject to the terms of the Mozilla Public
    License, v. 2.0. If a copy of the MPL was not distributed with this
    file, You can obtain one at http://mozilla.org/MPL/2.0/.

-->
<div id="settings">
    <div>
        <!-- header -->
        <div class="page-header">
            <h1 class="">{{'settings.title.shipping' | translate}}</h1>
        </div>
    </div>

    <p>
        {{'settings.explanation.shipping' | translate}}
    </p>

    <tabset>
        <tab active="strategy.weight.active" select="stopEditingCarrier()">
            <tab-heading>
                <i class="icon-ok" ng-show="configuration.strategy.value == 'weight'"></i>
                {{'settings.misc.byWeight' | translate}}
            </tab-heading>

            <div class="alert alert-block" ng-show="configuration.strategy.value != 'weight'">
                <div class="pull-right">
                    <button class="btn btn-primary" ng-click="setStrategy('weight')">
                        {{'settings.action.activateWeight' | translate}}
                    </button>
                </div>
                {{'settings.explanation.weight' | translate}}
            </div>

            <div ng-show="!editedCarrier">
                <ul ui-sortable="getCarriersSortableOptions('weight')" ng-model="carriers.weight">
                    <li ng-repeat="carrier in carriers.weight" class="block">
                        <div class="pull-right">
                            <div><a ng-click="editCarrier(carrier);">
                                {{'settings.action.editZone' | translate}}
                            </a></div>
                            <div><a ng-click="deleteCarrier(carrier);">
                                {{'settings.action.deleteZone' | translate}}
                            </a></div>
                        </div>
                        <carrier-summary carrier="carrier" main-currency="mainCurrency" weight-unit="weightUnit"/>
                    </li>
                </ul>

                <button class="btn" ng-click="newCarrierForm('weight')">
                    {{'settings.action.addZone' | translate}}
                </button>
            </div>
        </tab>
        <tab active="strategy.price.active" select="stopEditingCarrier()">
            <tab-heading>
                <i class="icon-ok" ng-show="configuration.strategy.value == 'price'"></i>
                {{'settings.misc.byPrice' | translate}}
            </tab-heading>

            <div class="alert alert-block" ng-show="configuration.strategy.value != 'price'">
                <div class="pull-right">
                    <button class="btn btn-primary" ng-click="setStrategy('price')">
                        {{'settings.action.activatePrice' | translate}}
                    </button>
                </div>
                {{'settings.explanation.price' | translate}}
            </div>

            <div ng-show="!editedCarrier">
                <ul ui-sortable="getCarriersSortableOptions('price')" ng-model="carriers.price">
                    <li ng-repeat="carrier in carriers.price" class="block">
                        <div class="pull-right">
                            <div><a ng-click="editCarrier(carrier);">
                                {{'settings.action.editZone' | translate}}
                            </a></div>
                            <div><a ng-click="deleteCarrier(carrier);">
                                {{'settings.action.deleteZone' | translate}}
                            </a></div>
                        </div>
                        <carrier-summary carrier="carrier" main-currency="mainCurrency"/>
                    </li>
                </ul>

                <button class="btn" ng-click="newCarrierForm('price')">
                    {{'settings.action.addZone' | translate}}
                </button>
            </div>
        </tab>
        <tab active="strategy.flat.active" select="stopEditingCarrier()">
            <tab-heading>
                <i class="icon-ok" ng-show="configuration.strategy.value == 'flat'"></i>
                {{'settings.misc.flatRate' | translate}}
            </tab-heading>
            <div class="alert alert-block" ng-show="configuration.strategy.value != 'flat'">
                <div class="pull-right">
                    <button class="btn btn-primary" ng-click="setStrategy('flat')">
                        {{'settings.action.activateFlatRate' | translate}}
                    </button>
                </div>
                {{'settings.explanation.flatRate' | translate}}
            </div>

            <div ng-show="!editedCarrier">
                <ul ui-sortable="getCarriersSortableOptions('flat')" ng-model="carriers.flat">
                    <li ng-repeat="carrier in carriers.flat" class="block">
                        <div class="pull-right">
                            <div><a ng-click="editCarrier(carrier);">
                                {{'settings.action.editZone' | translate}}
                            </a></div>
                            <div><a ng-click="deleteCarrier(carrier);">
                                {{'settings.action.deleteZone' | translate}}
                            </a></div>
                        </div>
                        <carrier-summary carrier="carrier" main-currency="mainCurrency"/>
                    </li>
                </ul>

                <button class="btn" ng-click="newCarrierForm('flat')">
                    {{'settings.action.addZone' | translate}}
                </button>
            </div>
        </tab>
        <tab active="strategy.none.active" select="stopEditingCarrier()">
            <tab-heading>
                <i class="icon-ok" ng-show="configuration.strategy.value == 'none'"></i>
                {{'settings.misc.none' | translate}}
            </tab-heading>

            <div class="alert alert-block" ng-show="configuration.strategy.value != 'none'">
                <div class="pull-right">
                    <button class="btn btn-primary" ng-click="setStrategy('none')">
                        {{'settings.action.disableShippingCosts' | translate}}
                    </button>
                </div>
                {{'settings.explanation.none' | translate}}
            </div>
            <div class="alert alert-block" ng-show="configuration.strategy.value == 'none'">
                {{'settings.explanation.costsDisabled' | translate}}
            </div>
        </tab>
    </tabset>

    <div ng-show="editedCarrier">

        <form>
            <fieldset>
                <legend>
                    <span ng-show="editedCarrier.isNew">
                        {{'settings.action.addZone' | translate}}
                    </span>
                    <span ng-show="!editedCarrier.isNew">
                        {{'settings.action.editZone' | translate}}
                    </span>
                    <div class="pull-right">
                        <a ng-click="stopEditingCarrier()">
                            {{'entity.action.back' | translate}}
                        </a>
                    </div>
                </legend>


                <h3>{{'settings.title.geographicDestinations' | translate}}</h3>
                {{'settings.misc.selectedDestinations' | translate:getTranslationProperties()}} {{editedCarrierDisplayDestinations}}
                <destination-picker destination="destinations" model="editedCarrier.destinations"></destination-picker>

                <h3>{{'settings.title.carrier' | translate}}</h3>

                <label for="carrier-name">
                    {{'settings.misc.carrierName' | translate}}
                </label>
                <input id="carrier-name" type="text" ng-model="editedCarrier.title"/>


                <label for="carrier-description">
                    {{'settings.misc.carrierDescription' | translate}}
                </label>
                <textarea id="carrier-description" ng-model="editedCarrier.description"></textarea>

                <div class="duration">
                    {{'settings.misc.deliveryTimePart1' | translate}}
                    <input type="text" ng-model="editedCarrier.minimumDays" class="span1" />
                    {{'settings.misc.deliveryTimePart2' | translate}}
                    <input type="text" ng-model="editedCarrier.maximumDays" class="span1" />
                    {{'settings.misc.deliveryTimePart3' | translate:getTranslationProperties()}}

                            <span class="alert-error alert"
                                  ng-show="!validShippingDurationRange(editedCarrier)">
                                  {{'settings.alert.deliveryTime' | translate}}
                            </span>
                </div>

                <h3>{{'settings.title.pricing' | translate}}</h3>

                <table class="table" ng-show="editedCarrier.strategy == 'weight' || editedCarrier.strategy == 'price'">
                    <thead>
                    <th>
                        <span ng-show="editedCarrier.strategy == 'weight'">
                            {{'settings.misc.weight' | translate}}
                        </span>
                        <span ng-show="editedCarrier.strategy == 'price'">
                            {{'settings.misc.orderAmount' | translate}}
                        </span>
                    </th>
                    <th>{{'settings.misc.shippingPrice' | translate}}</th>
                    </thead>
                    <tr ng-repeat="rule in editedCarrier.rules" class="hasInputs">
                        <td>
                            {{'settings.misc.carrierValuePart1' | translate}}
                            <input type="text" class="span1" value="{{fromValue(editedCarrier.rules, $index - 1)}}" disabled />
                            {{'settings.misc.carrierValuePart2' | translate}}
                            <input type="text" class="span1" ng-model="rule.upToValue" />

                            <span ng-show="editedCarrier.strategy == 'weight'"> {{weightUnit}} </span>
                            <span ng-show="editedCarrier.strategy == 'price'"> {{mainCurrency}}</span>

                                    <span class="alert-error alert" ng-show="rule.upToValue < fromValue(editedCarrier.rules, $index - 1)">
                                        {{'settings.alert.carrierValueInferior' | translate}}
                                    </span>
                                    <span class="alert-error alert" ng-show="!isValidFloat(rule.upToValue)">
                                        {{'settings.alert.carrierValueInvalid' | translate}}
                                    </span>
                        </td>
                        <td><money-amount ng-model="rule.price" currency="{{mainCurrency}}"/></td>
                        <td>
                            <a ng-show="!$first || !$last" ng-click="editedCarrier.rules.splice($index, 1)">{{'entity.action.remove' | translate}}</a>
                            <span ng-show="!$first && $last">-</span>
                            <a ng-show="$last" ng-click="editedCarrier.rules.push({});">{{'global.actions.add' | translate}}</a>
                        </td>
                    </tr>
                    <tr ng-show="editedCarrier.strategy == 'weight'" class="hasInput">
                        <td>
                            {{'settings.misc.additionalWeight' | translate:getTranslationProperties()}}
                        </td>
                        <td ng-repeat="carrier in [editedCarrier]">
                            <!-- trick to have currency being displayed correctly.
                                 FIXME money-amount directive should work without this.
                                 -->
                            <money-amount ng-model="carrier.perAdditionalUnit" currency="{{mainCurrency}}"/>
                        </td>
                        <td></td>
                    </tr>
                </table>
                <div ng-show="editedCarrier.strategy == 'flat'">
                    <p>
                        <input type="text" class="span1" ng-model="editedCarrier.perShipping" /> {{'settings.misc.currencyPerOrder' | translate:getTranslationProperties()}}
                    </p>
                    <p>
                        <input type="text" class="span1" ng-model="editedCarrier.perItem" /> {{'settings.misc.currencyPerItem' | translate:getTranslationProperties()}}
                    </p>
                </div>

                <div class="span2">
                    <div class="buttons hasLoading">
                        <button ng-click="createOrUpdateCarrier()" class="btn btn-large btn-primary" ng-show="editedCarrier.isNew">
                            {{'entity.action.create' | translate}}
                        </button>
                        <button ng-click="createOrUpdateCarrier()" class="btn btn-large btn-primary" ng-show="!editedCarrier.isNew">
                            {{'entity.action.update' | translate}}
                        </button>
                        <span ng-class="{'loading': isSaving}"></span>
                    </div>
                </div>
            </fieldset>
        </form>

    </div>

</div>
